<template>
	<view class="LogonInfo f-background text-align">
		<view class="effect por">
			<image class="logon" :src="`${OnlineStatic}advertise.gif`" mode="widthFix"></image>
			<!-- <image class="width-height100" :src="`${OnlineStatic}ditu.png`" mode=""></image> -->
			<!-- <view class="effect-backs poa"></view> -->
<!-- 			<view class="shake-effect poa dis-ali" :class="{'scale':showDatas==item.id}"
				:style="{top:`${item.top}rpx`,left:`${item.left}rpx`}" v-for="(item,index) in showData" :key="index">
				<image class="icon-img" :src="item.advertisementUrl" mode=""></image>
				<text class="margin-left-12 font-weight-400 size-24">{{item.advertisementDescribe}}</text>
				<image class="icon-imgx poa" src="@/static/icons/xia.png" mode=""></image>
			</view> -->
		</view>
		
		<view class="search-top box-sizing dis-ali pof app-top"
			:style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }"
			@click="previousPage">
			<image class="home" src="@/static/icons/index.png" mode="" v-if="!beforePage"></image>
			<text class="iconfont icon-a-lujing4332biankuang1 color3 dis" v-else></text>
		</view>
		<view class="logon-in pof f-background">
			<view class="logon-img por">
				<view class="lhfp poa">
					<image class="lhfp-img width-height100" :src="`${OnlineStatic}lhfps.png`" mode="widthFix"></image>
					<view class="lhfp-ming color size-26 margin-top-20">
						2周内·累积服务<text class="font-weight-600">38</text>个社区·<text class="font-weight-600">50820</text>人注册
					</view>
				</view>
				<image class="width-height100" :src="`${OnlineStatic}logos.png`" mode=""></image>
			</view>
			<u-button type="primary"
				:customStyle="{width: '344rpx',height: '88rpx',borderRadius: '100rpx',margin: '0 auto 48rpx'}"
				:color="settings.color" v-if="agreementBool">
				<!-- <text class="iconfont icon-weixin color-f size-34"></text> -->
				<text class="color-f font-weight-600 size-28">登录</text>
			</u-button>
			<u-button type="primary"
				:customStyle="{width: '344rpx',height: '88rpx',borderRadius: '100rpx',margin: '0 auto 48rpx'}"
				:color="settings.color" v-if="!agreement && !agreementBool" @click="showToast('请阅读并同意相关协议')">
				<!-- <text class="iconfont icon-weixin color-f size-34"></text> -->
				<text class="color-f font-weight-600 size-28">登录</text>
			</u-button>
			<u-button type="primary" :throttleTime="throttleTime"
				:customStyle="{width: '344rpx',height: '88rpx',borderRadius: '100rpx',margin: '0 auto 48rpx'}"
				:color="settings.color" v-if="agreement && !agreementBool" open-type="getPhoneNumber"
				@getphonenumber="onGetphonenumber">
				<!-- <text class="iconfont icon-weixin color-f size-34"></text> -->
				<text class="color-f font-weight-600 size-28">登录</text>
			</u-button>
			<view class="select-click dis agreement">
				<view class="open-select radius100 dis" @click="agreement = agreement ? false : true"
					:class="agreement ? 'background':'open-on-select'">
					<image class="open-select-icon" :src="`${OnlineStatic}gou.png`" mode="widthFix" v-if="agreement">
					</image>
				</view>
				<view class="dis-ali font-weight-400 color6 size-26">
					<view @click="agreement = agreement ? false : true">我已阅读并同意</view>
					<navigator class="color" hover-class="none" url="/packagePerson/user-agreement/user-agreement">《用户协议》</navigator> 与
					<navigator class="color" hover-class="none" url="/packagePerson/privacy-policy/privacy-policy"> 《隐私政策》</navigator>
				</view>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<u-popup :show="pictureShow" @close="previousPage" round="32">
			<view class="picture">
				<view class="picture-img">
					<view class="logo">
						<image class="width-height100" src="@/static/icons/logo.png" mode=""></image>
					</view>
					<view class="picture-ms">
						<view class="font-weight-600 color3 size-36">领火饭票</view>
						<view class="font-weight-400 color-8 size-24">授权微信头像及昵称，获得更优质的服务</view>
					</view>
				</view>
				<button class="access por radius100" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="width-height100" v-if="!params.headImgUrl" src="@/static/icons/txs.png" mode="">
					</image>
					<image class="width-height100" v-else :src="params.headImgUrl" mode=""></image>
					<view class="access-dis dis poa width-height100" v-if="!params.headImgUrl">
						<text class="font-weight-400 size-28 color-f">一键获取</text>
					</view>
				</button>
				<view class="nickname border-bottom">
					<view class="font-weight-400 color3 size-34">昵称</view>
					<input type="nickname" v-model="params.nickName" placeholder="请输入昵称"
						placeholder-class="font-weight-400 color9" class="input color3 size-34" />
				</view>
				<u-button type="primary" throttleTime="3000"
					:customStyle="{width: '636rpx',height: '84rpx',borderRadius: '10rpx',margin: '0 auto'}"
					:color="settings.color" @click="onSave">
					<text class="color-f font-weight-600 size-34">保存</text>
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getSystemInfo, getLocation, onPriceCut, singleUpload } from '@/utils/index';
	import { OnlineStatic, BindPhone, BindInfo, GetAdvertisementList } from "@/api/index"
	import { settings } from "@/utils/public"
	export default {
		data() {
			return {
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				pictureShow: false,
				settings,
				agreementBool: false,
				agreement: false,
				OnlineStatic,
				params: {
					headImgUrl: '', // 头像
					nickName: '', // 昵称
				},
				// randomData: [
				// 	{ top: 260, left: 370 },
				// 	{ top: 360, left: 20 },
				// 	{ top: 480, left: 120 },
				// 	{ top: 590, left: 300 },
				// 	{ top: 180, left: 60 },
				// 	// { top: 500, left: 140 },
				// 	// { top: 600, left: 400 },
				// ],
				showIndex: null,
				dataIndex: 2,
				showDatas: 0,
				boolShow: false,
				showData: [],
				beforePage: ""
			}
		},
		onLoad() {
			// let _this = this
			const pages = getCurrentPages(); //当前页
			let beforePage = (pages[pages.length - 2]); //上个页面、
			this.beforePage = beforePage
			console.log('beforePage', beforePage)
			this.login()
			// this.postGetAdvertisementList()
			// console.log('this.getRandomItems(this.randomData,3)', this.getRandomValues(this.dataIndex))
		},
		onHide() {
			// clearInterval(this.showIndex)
		},
		methods: {
			// 广告部分
			// async postGetAdvertisementList() {
			// 	const { data, code } = await GetAdvertisementList()
			// 	if (code == '200') {
			// 		data.map((res, index) => {
			// 			res.top = this.randomData[index].top
			// 			res.left = this.randomData[index].left
			// 		})
			// 		this.entList = data
			// 		// this.showData = [data[0].id, data[1].id, data[2].id]
			// 		// this.processingData()
			// 	}
			// },
			// // 处理数据
			// processingData() {
			// 	let { showData, entList, dataIndex } = this
			// 	console.log('showData', showData)
			// 	const newBoxIndex = (entList[entList.length - 1] + 1) % entList.length;
			// 	dataIndex = dataIndex < 
			// 	showData.shift()
			// 	showData.push(entList[dataIndex].id)
			// 	console.log('showData', dataIndex,showData)
			// 	// this.$nextTick(() => {
			// 	// let bool = false
			// 	// const _this = this
			// 	// const { showData } = this
			// 	// this.showIndex = setTimeout(() => {
			// 	// 	if (_this.dataIndex == _this.entList.length - 1) _this.dataIndex = 0
			// 	// 	else _this.dataIndex++
			// 	// 	_this.showData.push(_this.getRandomValues(_this.dataIndex, 1)[0])
			// 	// 	_this.showDatas = showData[0].id
			// 	// }, 500)
			// 	// let funShow = setTimeout(() => {
			// 	// 	// bool = true
			// 	// 	clearInterval(this.showIndex)
			// 	// 	_this.showData.splice(0, 1)
			// 	// 	_this.processingData()

			// 	// }, 1000)
			// 	// if (bool) {
			// 	// 	clearInterval(funShow)
			// 	// 	bool = false
			// 	// }
			// 	// });
			// },
			// getRandomValues(num, indexs) {
			// 	// console.log('num', num)
			// 	let result = [];
			// 	if (indexs == 1) result = [this.entList[num]]
			// 	else {
			// 		this.entList.map((res, index) => {
			// 			if (num > index && num - 4 < index) {
			// 				// console.log('dataIndex',this.dataIndex,res)
			// 				result.push(res)
			// 			}
			// 		})
			// 	}
			// 	console.log('result', result)
			// 	return result;
			// },
			// 获取code
			login() {
				uni.login({
					success: function(loginRes) {
						if (loginRes.errMsg == 'login:ok') uni.setStorageSync('code', loginRes.code);
						else {
							uni.showToast({
								title: loginRes.errMsg,
								icon: 'none',
							})
						}
					},
					complete(res) {
						console.log('completebindLogin', res)
					}
				});
			},
			// 保存
			async onSave() {
				let bool = ''
				let { params } = this
				let _this = this
				if (!params.headImgUrl) bool = '请上传头像'
				else if (!params.nickName) bool = '请填写昵称'
				else if (!/^.{2,20}$/.test(params.nickName)) bool = '请输入正确的昵称'
				if (bool) {
					this.showToast(bool)
					return
				}
				const { code, data } = await BindInfo(this.params)
				if (code == "200") {
					_this.showToast('保存成功！')
					setTimeout(() => {
						_this.previousPage()
					}, 1500)
				}
			},
			// 返回上一页 或者首页
			previousPage() {
				if (this.beforePage && this.beforePage.route) { // 有的时候 返回上一页
					uni.navigateBack({});
				} else { // 没有上一页返回首页
					uni.switchTab({
						url: '/pages/pages/index'
					});
				}
			},
			// 绑定信息
			async postBindPhone(codes) {
				this.agreementBool = true
				let param = {
					phoneCode: codes,
					clientId: 'lhfp-app',
					superiorId: uni.getStorageSync('superiorId') || 0, // 上级id
					code: uni.getStorageSync('code') || 0, // code
				}
				await BindPhone(param).then(({ code, data }) => {
					// console.log(code,data)
					if (code == '200') {
						uni.setStorageSync('userInfo', data)
						uni.setStorageSync('token', data.token);
						uni.removeStorageSync('code');
						uni.removeStorageSync('superiorId');
						if (!data.headImg) this.pictureShow = true
						else this.previousPage()
					}
				}).catch(() => {
					this.agreementBool = false
					this.login()
				})
				// 	uni.removeStorageSync('village');

			},
			showToast(bool) {
				uni.showToast({
					title: bool,
					duration: 1400,
					icon: 'none'
				});
			},
			onGetphonenumber(e) {
				console.log(e)
				let bool = ''
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.postBindPhone(e.detail.code)
				} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					bool = '您已取消授权'
				} else bool = '获取手机号失败，请关闭小程序，重新进入'
				if (bool) this.showToast(bool)
			},
			async onChooseAvatar(e) {
				console.log(e.detail.avatarUrl)
				const img = await singleUpload(e.detail.avatarUrl, 1)
				console.log('imgimg', img.imgURL)
				this.params.headImgUrl = img.imgURL
			}
		}
	}
</script>

<style lang="scss">
	.LogonInfo {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		// padding-bottom: 35vh;
		// padding-top: 350rpx;
		.logon{
			position: fixed;
			width: 100%;
			height: 100vh;
		}
		.video{
			width: 100%;
			height: 50vh;
		}
		// 动效部分
		.effect {
			width: 100%;
			height: 50vh;
			background: #f6f6f6;

			.effect-backs {
				width: 100%;
				height: 100%;
				z-index: 10;
				top: 0;
				left: 0;
				// background: rgba(0, 0, 0, 0.5);
			}

			.shake-effect {
				background-color: #000000;
				color: #ffffff;
				padding: 4rpx 22rpx 4rpx 4rpx;
				border-radius: 100rpx;
				animation: shake .3s;
				line-height: 58rpx;
				transform: scale(1);
				height: 58rpx;

				.icon-imgx {
					left: 50%;
					margin-left: -5.5rpx;
					bottom: -6rpx;
					width: 11rpx;
					height: 6rpx;
				}

				.icon-img {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100rpx;
				}
			}

			.scale {
				transition: transform .1s;
				transform: scale(0) !important;
			}

			@keyframes shake {
				0% {
					transform: scale(1);
				}

				25% {
					transform: scale(1.2);
				}

				50% {
					transform: scale(1);
				}

				75% {
					transform: scale(0.9);
				}

				100% {
					transform: scale(1);
				}
			}
		}

		.logon-in {
			bottom: 0;
			z-index: 100;
			width: 100%;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.select-click {
				padding-bottom: 94rpx;

				.open-select {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.search-top {
			padding-left: 24rpx;
			z-index: 11;

			.iconfont {
				width: 56rpx;
				height: 56rpx;
				background: rgba(216, 216, 216, 0.6);
				border-radius: 100rpx;
			}
		}

		.home {
			width: 55rpx;
			height: 55rpx;
		}

		.logon-img {
			width: 100%;
			height: 506rpx;
			margin: 0 auto 92rpx;

			.lhfp {
				left: 46rpx;
				top: 34rpx;
			}

			.lhfp-img {
				width: 186rpx;
				height: 46rpx;
			}
		}

		.quarter {
			letter-spacing: 5px;
		}

		.agreement {
			width: 636rpx;
			margin: 0 auto;
		}

		// 头像部分
		.picture {
			text-align: left;
			padding: 40rpx 36rpx 60rpx 44rpx;

			.picture-img {
				display: grid;
				grid-template-columns: 64rpx 1fr;
				grid-gap: 0 16rpx;
				align-items: center;
			}

			.logo {
				width: 64rpx;
				height: 64rpx;
			}

			.picture-ms {
				display: grid;
				grid-gap: 12rpx 0;
			}

			.access {
				margin: 88rpx auto 30rpx;
				width: 136rpx;
				height: 136rpx;
				box-sizing: border-box;
				padding: 0;
			}

			.access-dis {
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.50);
			}

			.nickname {
				width: 494rpx;
				margin: 0 auto 92rpx;
				display: grid;
				grid-template-columns: 116rpx 1fr;
				align-items: center;

				.input {
					height: 90rpx;
				}
			}
		}
	}
</style>